<template>
  <div class="screen-top flex-row flex-a-center">
    <div class="screen-top-l">
      <mapChart ref="MapChartRef" />
    </div>
    <div class="screen-top-r"></div>
  </div>
</template>
<script setup lang="ts" name="screen-top">
import { ref, onMounted } from "vue";
import { ECharts } from "echarts";
import mapChart from "./chinaMapChart.vue";
const MapChartRef = ref();
let mapData = [
  {
    fromName: "北京",
    toName: "上海",
    coords: [
      [116.4551, 40.2539],
      [121.4648, 31.2891]
    ]
  },
  {
    fromName: "上海",
    toName: "北京",
    coords: [
      [121.4648, 31.2891],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "北京",
    toName: "广州",
    coords: [
      [116.4551, 40.2539],
      [113.5107, 23.2196]
    ]
  },
  {
    fromName: "广州",
    toName: "北京",
    coords: [
      [113.5107, 23.2196],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "北京",
    toName: "成都",
    coords: [
      [116.4551, 40.2539],
      [103.9526, 30.7617]
    ]
  },
  {
    fromName: "成都",
    toName: "北京",
    coords: [
      [103.9526, 30.7617],
      [116.4551, 40.2539]
    ]
  },
  {
    fromName: "成都",
    toName: "新疆维吾尔自治区",
    coords: [
      [103.9526, 30.7617],
      [85.294711, 41.371801]
    ]
  },
  {
    fromName: " 新疆维吾尔自治区",
    toName: "成都",
    coords: [
      [85.294711, 41.371801],
      [103.9526, 30.7617]
    ]
  }
];
// 初始化 echarts
const initCharts = (): void => {
  MapChartRef.value?.initChart(mapData) as ECharts;
};
onMounted(() => {
  // 初始化 echarts
  initCharts();
});
</script>
<style lang="scss">
.screen-top {
  width: 100%;
  height: 70%;
  background: #fff;
  border-radius: 30px;
  .screen-top-l {
    flex: 1;
    height: 100%;
  }
  .screen-top-r {
    flex: 1;
    height: 100%;
  }
}
</style>
